<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0,uc-fitscreen=yes" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
		<title>题目详情</title>
		<meta name="keywords" content="题目详情" />
		<meta name="description" content="题目详情" />
		<!-- miniMObile.css、js -->
		<link rel="stylesheet" type="text/css" href="css/miniMobile.css" />
		<link rel="stylesheet" type="text/css" href="css/jquery-labelauty.css" />
		<!-- 百度 CDN: -->
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<!-- <script type="text/javascript" src="js/zepto.min.js"></script> -->
		<script type="text/javascript" src="js/miniMobile.js"></script>
		<script type="text/javascript" src="js/api.js"></script>
		<script type="text/javascript" src="js/jquery-labelauty.js"></script>
		<!-- fonticon -->
		<link rel="stylesheet" type="text/css" href="plugins/fonticon/iconfont.css" />
	<style>
		#category {width:100%;display: inline;white-space: nowrap;overflow-x:scroll;float:left;overflow-y:hidden;}
		#category li{display:inline-block;width:1rem;height:1rem;}
		
		ul { list-style-type: none;}
		li { display: inline-block;}
		li { margin: 10px 0;}
		input.labelauty + label { font: 12px "Microsoft Yahei";}
		.bg-color1{
			background-color: #f7faff;
		}
		.stu-info-title {
			line-height: 1rem;
			background: #f7faff;
		}
		.que_title{
			font-weight: bold;
		}
		.title_desc{
			font-size: 0.25rem;
		}
		.score_desc{
			font-size: 0.25rem;
		}
		.sub_text{
			font-size: 0.25rem;
		}
		.bg-color3 {
			background-color: #f7faff;
		}
		.difference-value {
			padding-bottom: 0.2rem;
			padding-top: 0.1rem;
			color: #4acb77;
			font-weight: bold;
			text-align: center
		}
		.line {
			width: 1px;
			height: 70%;
			background: #e6e6e6;
			margin:0 auto;
		}
	</style>

	</head>

	<body class="fadeIn animated">
		<div id="message" v-cloak>
		
			<div class="grid clearfix" v-for="(pentItem, pentIndex) in quesList" v-cloak>
				<div class="grid  clearfix stu-info-title bg-color1 pl3 pr3">
					<span class="f30 que_title"  v-if="pentItem.stem_type == 1">{{pentIndex+1}}.单词朗读</span>
					<span class="f30 que_title"  v-else-if="pentItem.stem_type == 2">{{pentIndex+1}}.单词朗读</span>
					<span class="f30 que_title" v-else-if="pentItem.stem_type == 3">{{pentIndex+1}}.回答问题</span>
					<span class="f30 que_title" v-else-if="pentItem.stem_type == 4">{{pentIndex+1}}.短文朗读</span>
				</div>
				<div class="grid  clearfix pl3 pr3 f28 pb3">
					<div class="pt1"><span class="title_desc">{{pentItem.title}}</span></div>
					<div class="pt1"><span class="title_desc">{{pentItem.title_desc}}</span></div>
					<div class="pt1"><span class="score_desc">{{pentItem.score_desc}}</span></div>
					
					<div class="grid clearfix pt1" v-for="(item, index) in pentItem.detail" >
						<div><span class="sub_text">{{item.sub_text}}</span></div>
						<div class="pt1" v-if="item.image !==''" ><img class="h30 radius10 ml1" :src="item.image"/></div>
						
						
						<div class="grid clearfix mt2 radius10 bg-color3">
							<div class="box t-c col-5 f28">
								<div class="t-c pt2 pl5">
									<div class="f28">你的分数</div>
									<div class="f32 h5 difference-value" v-cloak>{{item.ans.score}}</div>
								</div>
							</div>
							<div class="box t-c col-2 h13 pt2">
								<div class="line"></div>
							</div>
							<div class="box t-c col-5 f28">
								<div class="t-c pt2  pr5">
									<div class="f28">你的录音</div>
									<div class="f32 h5 difference-value" v-cloak>
										<audio :src="item.ans.value" :id="getAudioId(item.ans.question_id)"></audio>
										<img v-if="item.ans.value!==null && item.ans.value!==''" src="img/ic_luyingreen.png" class="h5 w5" @click="playAudio(item.ans)"/>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
			</div>
			
		
		</div>

	</body>


	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
	<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.js"></script>
	<script type="text/javascript">
		
		new Vue({
			el: '#message',
			data: {
				params: getQueryString("params"),
				baseInfo: [],
				quesList: [],
			},
			mounted: function() {
				this.isterminal();
				if (browser.versions.weixin) {
					document.getElementById('JweixinTip').style.display = 'block';
				}
				this.personReport();

			},
			methods: {
				//判断 android ios
				isterminal: function() {
					var that = this;
					if (that.isTerminal == 'android') {
						that.isTerminal = 1;
					} else if (that.isTerminal == 'ios') {
						that.isTerminal = 2;
					}
				},
				personReport: function() {
					var b = new Base64();
					var str = b.decode(this.params);
					var objParams = JSON.parse(str);
					console.log(objParams);
					//学生成绩个人学生答题情况查看(模考报告)接口
					this.$http.post(personReportApi, objParams, {
						emulateJSON: true
					}).then(function(res) {
						if (res.data.error_code == 200) {
							this.baseInfo = res.data.data.baseInfo;
							this.quesList = res.data.data.list;
							console.log('----------------------------------------');
							console.log(this.quesList)
							console.log('----------------------------------------');
						} else {
							//请求错误
							window.android.errorMsg(res.data.info);
						}
					}).catch(e => {
						// 打印一下错误
						console.log(e);
					})
				},
				click_x5: function() {
					if (browser.versions.android) {
						console.log('-------------------打印成功，走了调用安卓分享---------------------');
						AndroidBack.onX5ButtonClicked();
					}
				},getAudioId:function(id){
					return "audio_"+id
				},playAudio:function(item){
					$("#audio_"+item.question_id)[0].play();
				}
		
			},
			filters: {
				numFilter(value) {
					// 截取当前数据到小数点后三位
					let transformVal = parseFloat(value).toFixed(3)
					let realVal = transformVal.substring(0, transformVal.length - 1)
					if (realVal == 'NaN') {
						realVal = 0;
					}
					// num.toFixed(3)获取的是字符串
					return parseFloat(realVal)
				},
				numLawFilter([num, count]) {
					let law = num / count * 100;
					// 截取当前数据到小数点后三位
					let transformVal = parseFloat(law).toFixed(0);

					if (transformVal == 'NaN') {
						transformVal = 0;
					}
					return parseFloat(transformVal)
				},
				formatUnixtimestamp(value) {
					return formatUnixtimestamp(value);
				}

			}
		});
	</script>

</html>
